<template>
  <view>
    <!-- 这个组件不需要显示任何内容, 所以 template 里面可以留空 -->
  </view>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';

export default {
  props: {
    src: {
      type: String,
      required: true, // 音频文件路径，必须传入
    },

    volume: {
      type: Number,
      default: 1,     // 音量，默认为 1 (最大)
      validator: (value) => value >= 0 && value <= 1, // 音量必须在 0-1 之间
    },
  },

  setup(props) {
    const innerAudioContext = ref(null);
    const isPlaying = ref(false); // 添加一个标志来跟踪音频是否正在播放

    onMounted(() => {
      innerAudioContext.value = uni.createInnerAudioContext();
      innerAudioContext.value.src = props.src;
      innerAudioContext.value.volume = props.volume;
      innerAudioContext.value.autoplay = false;

      innerAudioContext.value.onEnded(() => {
        isPlaying.value = false; // 播放结束后，重置播放状态
      });

      innerAudioContext.value.onError((res) => {
        console.error('音频播放错误:', res);
        isPlaying.value = false; // 出错时，也重置播放状态
      });
    });

    onUnmounted(() => {
      if (innerAudioContext.value) {
        innerAudioContext.value.stop();
        innerAudioContext.value.destroy();
        innerAudioContext.value = null;
      }
    });

    const playSound = () => {
      if (!isPlaying.value) { // 只有当音频没有正在播放时才播放
        innerAudioContext.value.play();
        isPlaying.value = true; // 设置为 true，避免重复播放
      }
    };

    return {
      playSound,
    };
  },
};
</script>
